<template>
  <div class="top_se">
    <input type="text" placeholder="请输入查询ID" class="input_c" v-model="selectId">
    <div class="select" @click="toSelect">
      <svg class="icon-right" aria-hidden="true">
        <use xlink:href="#icon-qb_gd"></use>
      </svg>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    name: 'searchinput',
    props: {
      searchText: {
        type: String
      },
      //  搜索路径
      searchRoute: {
        type: String
      },
      selfId: {
        type: String
      }
    },
    data() {
      return {
        searchRouteTo: this.searchRoute,
        // select: this.$store.state.sale.teamId,
        stateSelect: '', // 防止重复查询的标志
        searchData: false // 清空按钮状态
      };
    },
    computed: {
      selectId: {
        get: function () {
          if (this.$store.state.sale.teamId > 0) {
            // this.toSelect(this.$store.state.sale.teamId);
            return this.$store.state.sale.teamId;
          }
        },
        set: function (value) {
          this.$store.state.sale.teamId = value;
        }
      }
    },
    methods: {
      toSelect() {
        console.log('select to click');
        // 根据ID查询数据
        // 防止重复查询
        if (this.stateSelect === this.selectId) {
          return;
        }
        // 查询到前动画
        this.stateLoad = true;
        console.log('queryTeamDownquery   toselect:', this.selectId, this.selfId);
        this.$UserReq.queryTeamDown({
          id: this.selfId,
          downId: this.selectId
        }).then((res) => {
          console.log('queryTeamDownqueryTeamDown:tto res', res);
          this.stateSelect = this.selectId; // 把防止重复查询的变量置为true
          if (res.data) {
            res.data.selectId = this.selectId;
            this.$emit('feedData', res);
          } else {
            this.$emit('readySelect', false);
          }
          // 告诉父组件我查出来争取的数据了，你去掉加载动画吧
        });
      }
    },
    created() {
      console.log('selectIdselectId', this.selectId);
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .input_c {
    background: white;
    width: 100%;
    height: vw(38px);
    word-vw(14, second-ash);
    padding: 0 4vw;
    flex-x();
    justify-content flex-start
  }

  .top_se {
    position fixed
    margin vw(15)
    width vw(345)
    height vw(45)
    box-sizing border-box
    background white
    border-radius vw(5)
    flex-x()

    & .img2 {
      width: vw(60)
      height: vw(38px);
      line-height vw(38px);
      text-align center
      z-index: 2;
      background: gradient-color;
      font-size: 3.2vw;
      color: #fff;
    }
    & .img1 {
      width: 4vw;
      position: absolute;
      right: 18vw;
      padding: 1vw 2vw;
      bottom: 5vw;
      z-index: 2;
    }
    .select {
      position: absolute
      width vw(120)
      height vw(45)
      right 0
    }
    & .icon-right{
      position: absolute
      width vw(11)
      height vw(11)
      overflow: hidden
      right vw(17)
      top vw(17)
      fill #c8c8c8
    }
  }
</style>
